<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-i18n="hero.title">Python Developer</title>
    <meta name="description" content="专注于消息中间件、实时数据处理和高可用架构设计的Python开发者">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="i18n.js" defer></script>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="nav">
        <div class="container">
            <div class="nav-content">
                <div class="nav-logo" data-i18n="hero.title">Python Developer</div>
                <ul class="nav-menu">
                    <li><a href="#home" data-i18n="nav.home">首页</a></li>
                    <li><a href="#about" data-i18n="nav.about">关于我</a></li>
                    <li><a href="#skills" data-i18n="nav.skills">技能</a></li>
                    <li><a href="#projects" data-i18n="nav.projects">项目</a></li>
                    <li><a href="#contact" data-i18n="nav.contact">联系我</a></li>
                    <li><a href="#blog" data-i18n="nav.blog">博客</a></li>
                </ul>
                <div class="nav-controls">
                    <!-- 语言切换器 -->
                    <div class="language-switcher">
                        <button class="lang-btn active" data-lang="zh" data-i18n="lang.zh">中文</button>
                        <button class="lang-btn" data-lang="en" data-i18n="lang.en">EN</button>
                    </div>
                    <!-- 主题切换按钮 -->
                    <button class="theme-toggle" id="themeToggle" data-i18n="theme.light" title="切换到浅色模式">
                            <i class="fas fa-sun"></i>
                        </button>
                    <!-- 移动端菜单按钮 -->
                    <div class="hamburger" id="hamburger">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 首页英雄区域 -->
    <section id="home" class="hero">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">
                    <span class="typing-text" data-i18n="hero.title">Python Developer</span>
                </h1>
                <p class="hero-subtitle" data-i18n="hero.subtitle">专注于消息中间件、实时数据处理和高可用架构设计</p>
                <div class="hero-buttons">
                    <a href="#projects" class="btn btn-primary" data-i18n="hero.cta.primary">查看我的作品</a>
                    <a href="#contact" class="btn btn-secondary" data-i18n="hero.cta.secondary">联系我</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我部分 -->
    <section id="about" class="about">
        <div class="container">
            <h2 class="section-title" data-i18n="about.title">关于我</h2>
            <div class="about-content">
                <div class="about-text">
                    <h3 data-i18n="about.intro">我是一名Python开发者，专注于消息中间件、实时数据处理和高可用架构设计。</h3>
                    <p data-i18n="about.description">在技术领域，我热衷于构建高性能、可扩展的系统架构。我的专业方向包括消息队列系统、实时数据流处理和分布式系统设计。</p>
                    <p data-i18n="about.hobbies">除了技术之外，我喜欢Rust语言，热爱动漫文化，包括《幸运星》、《孤独摇滚》和《摇曳露营》等作品。</p>
                    
                    <!-- 技术栈展示 -->
                    <div class="tech-stack">
                        <h4 data-i18n="about.tech_stack">技术栈</h4>
                        <div class="tech-category">
                            <h4 data-i18n="about.expert">专家级</h4>
                            <div class="tech-tags">
                                <span class="tech-tag expert">Python</span>
                                <span class="tech-tag expert">MongoDB</span>
                            </div>
                        </div>
                        <div class="tech-category">
                            <h4 data-i18n="about.proficient">熟练级</h4>
                            <div class="tech-tags">
                                <span class="tech-tag proficient">Next.js</span>
                                <span class="tech-tag proficient">ElasticSearch</span>
                            </div>
                        </div>
                        <div class="tech-category">
                            <h4 data-i18n="about.learning">学习级</h4>
                            <div class="tech-tags">
                                <span class="tech-tag learning">Rust</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 专业经历时间线 -->
                    <div class="experience-timeline">
                        <h4 data-i18n="about.experience">专业经历</h4>
                        <div class="timeline">
                            <div class="timeline-item">
                                <div class="timeline-date">2021-2023</div>
                                <div class="timeline-content">
                                    <h4>OpenAI</h4>
                                    <p>软件工程师</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date">2017-2020</div>
                                <div class="timeline-content">
                                    <h4>Google</h4>
                                    <p>软件工程师</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date">2014-2016</div>
                                <div class="timeline-content">
                                    <h4>斯坦福大学</h4>
                                    <p>计算机科学硕士</p>
                                </div>
                            </div>
                            <div class="timeline-item">
                                <div class="timeline-date">2010-2014</div>
                                <div class="timeline-content">
                                    <h4>清华大学</h4>
                                    <p>计算机科学与技术学士</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 个人成就 -->
                    <div class="achievements">
                        <h4 data-i18n="about.achievements">个人成就</h4>
                        <div class="achievement-list">
                            <div class="achievement-item">
                                <div class="achievement-icon">🎓</div>
                                <div class="achievement-text" data-i18n="about.graduation">清华大学优秀毕业生</div>
                            </div>
                            <div class="achievement-item">
                                <div class="achievement-icon">🏆</div>
                                <div class="achievement-text" data-i18n="about.mvp">微软MVP</div>
                            </div>
                            <div class="achievement-item">
                                <div class="achievement-icon">🌟</div>
                                <div class="achievement-text" data-i18n="about.certification">华为开发者认证</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="about-image">
                    <img src="https://kirineko.github.io/hita.png" alt="个人照片">
                </div>
            </div>
        </div>
    </section>

    <!-- 技能部分 -->
    <section id="skills" class="skills-section">
        <div class="container">
            <h2 class="section-title" data-i18n="skills.title">技能</h2>
            <div class="skills-content">
                <div class="skills-category">
                    <h3 data-i18n="skills.programming">编程语言</h3>
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>Python</span>
                            <span class="skill-percentage">95%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="--width: 95%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>Rust</span>
                            <span class="skill-percentage">75%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="--width: 75%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>JavaScript</span>
                            <span class="skill-percentage">85%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="--width: 85%"></div>
                        </div>
                    </div>
                </div>
                <div class="skills-category">
                    <h3 data-i18n="skills.web">Web开发</h3>
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>Next.js</span>
                            <span class="skill-percentage">88%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="--width: 88%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>React</span>
                            <span class="skill-percentage">90%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="--width: 90%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>HTML/CSS</span>
                            <span class="skill-percentage">92%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="--width: 92%"></div>
                        </div>
                    </div>
                </div>
                <div class="skills-category">
                    <h3 data-i18n="skills.database">数据库</h3>
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>MongoDB</span>
                            <span class="skill-percentage">90%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="--width: 90%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>ElasticSearch</span>
                            <span class="skill-percentage">85%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="--width: 85%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>PostgreSQL</span>
                            <span class="skill-percentage">80%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="--width: 80%"></div>
                        </div>
                    </div>
                </div>
                <div class="skills-category">
                    <h3 data-i18n="skills.tools">开发工具</h3>
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>Git</span>
                            <span class="skill-percentage">95%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="--width: 95%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>Docker</span>
                            <span class="skill-percentage">82%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="--width: 82%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-info">
                            <span>Kubernetes</span>
                            <span class="skill-percentage">75%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="--width: 75%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目部分 -->
    <section id="projects" class="projects">
        <div class="container">
            <h2 class="section-title" data-i18n="projects.title">项目展示</h2>
            <div class="projects-filter">
                <button class="filter-btn active" data-filter="all" data-i18n="projects.filter.all">全部</button>
                <button class="filter-btn" data-filter="web" data-i18n="projects.filter.web">Web应用</button>
                <button class="filter-btn" data-filter="mobile" data-i18n="projects.filter.mobile">移动应用</button>
                <button class="filter-btn" data-filter="ai" data-i18n="projects.filter.ai">AI项目</button>
            </div>
            <div class="projects-grid">
                <div class="project-card" data-category="web">
                    <div class="project-image">
                        <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop" alt="项目1">
                    </div>
                    <div class="project-content">
                        <h3>实时数据监控系统</h3>
                        <p>基于Python和WebSocket的实时数据监控平台，支持高并发数据处理。</p>
                        <div class="project-tech">
                            <span>Python</span>
                            <span>WebSocket</span>
                            <span>React</span>
                        </div>
                        <div class="project-links">
                            <a href="#" class="project-link" data-i18n="projects.view">查看项目</a>
                            <a href="#" class="project-link" data-i18n="projects.source">源代码</a>
                        </div>
                    </div>
                </div>
                <div class="project-card" data-category="ai">
                    <div class="project-image">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop" alt="项目2">
                    </div>
                    <div class="project-content">
                        <h3>智能消息处理系统</h3>
                        <p>使用机器学习技术对消息进行分类和优先级排序的智能化系统。</p>
                        <div class="project-tech">
                            <span>Python</span>
                            <span>TensorFlow</span>
                            <span>MongoDB</span>
                        </div>
                        <div class="project-links">
                            <a href="#" class="project-link" data-i18n="projects.view">查看项目</a>
                            <a href="#" class="project-link" data-i18n="projects.source">源代码</a>
                        </div>
                    </div>
                </div>
                <div class="project-card" data-category="web">
                    <div class="project-image">
                        <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop" alt="项目3">
                    </div>
                    <div class="project-content">
                        <h3>高可用消息队列</h3>
                        <p>基于RabbitMQ和Redis的高可用消息队列系统，支持百万级并发。</p>
                        <div class="project-tech">
                            <span>Python</span>
                            <span>RabbitMQ</span>
                            <span>Redis</span>
                        </div>
                        <div class="project-links">
                            <a href="#" class="project-link" data-i18n="projects.view">查看项目</a>
                            <a href="#" class="project-link" data-i18n="projects.source">源代码</a>
                        </div>
                    </div>
                </div>
                <div class="project-card" data-category="mobile">
                    <div class="project-image">
                        <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=400&h=300&fit=crop" alt="项目4">
                    </div>
                    <div class="project-content">
                        <h3>移动端数据同步</h3>
                        <p>跨平台移动应用，实现实时数据同步和离线缓存功能。</p>
                        <div class="project-tech">
                            <span>React Native</span>
                            <span>Node.js</span>
                            <span>MongoDB</span>
                        </div>
                        <div class="project-links">
                            <a href="#" class="project-link" data-i18n="projects.view">查看项目</a>
                            <a href="#" class="project-link" data-i18n="projects.source">源代码</a>
                        </div>
                    </div>
                </div>
                <div class="project-card" data-category="ai">
                    <div class="project-image">
                        <img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?w=400&h=300&fit=crop" alt="项目5">
                    </div>
                    <div class="project-content">
                        <h3>实时异常检测</h3>
                        <p>基于机器学习的实时异常检测系统，用于监控系统健康状态。</p>
                        <div class="project-tech">
                            <span>Python</span>
                            <span>Scikit-learn</span>
                            <span>ElasticSearch</span>
                        </div>
                        <div class="project-links">
                            <a href="#" class="project-link" data-i18n="projects.view">查看项目</a>
                            <a href="#" class="project-link" data-i18n="projects.source">源代码</a>
                        </div>
                    </div>
                </div>
                <div class="project-card" data-category="web">
                    <div class="project-image">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop" alt="项目6">
                    </div>
                    <div class="project-content">
                        <h3>分布式日志系统</h3>
                        <p>基于ElasticSearch的分布式日志收集和分析系统。</p>
                        <div class="project-tech">
                            <span>Python</span>
                            <span>ElasticSearch</span>
                            <span>Kibana</span>
                        </div>
                        <div class="project-links">
                            <a href="#" class="project-link" data-i18n="projects.view">查看项目</a>
                            <a href="#" class="project-link" data-i18n="projects.source">源代码</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系部分 -->
    <section id="contact" class="contact">
        <div class="container">
            <h2 class="section-title" data-i18n="contact.title">联系我</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <h3 data-i18n="contact.info">联系信息</h3>
                    <p data-i18n="contact.subtitle">有任何问题或合作意向，欢迎随时联系我！</p>
                    <ul class="contact-list">
                        <li>
                            <i class="fas fa-envelope"></i>
                            <a href="mailto:1018465438@qq.com" class="contact-link">1018465438@qq.com</a>
                        </li>
                        <li>
                            <i class="fas fa-globe"></i>
                            <a href="https://kirineko.github.io" target="_blank" class="contact-link">https://kirineko.github.io</a>
                        </li>
                        <li>
                            <i class="fas fa-map-marker-alt"></i>
                            <span>中国</span>
                        </li>
                    </ul>
                    
                    <!-- 社交媒体链接 -->
                    <div class="social-media">
                        <h4 data-i18n="social.personal_site">个人网站</h4>
                        <div class="social-links-horizontal">
                            <a href="https://kirineko.github.io" target="_blank" class="social-link-contact">
                                <i class="fas fa-globe social-icon"></i>
                                <span data-i18n="social.personal_site">个人网站</span>
                            </a>
                        </div>
                        
                        <h4 data-i18n="social.email">邮箱联系</h4>
                        <div class="social-links-horizontal">
                            <a href="mailto:1018465438@qq.com" class="social-link-contact">
                                <i class="fas fa-envelope social-icon"></i>
                                <span data-i18n="social.email">邮箱联系</span>
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="contact-form-container">
                    <h3 data-i18n="contact.form">发送消息</h3>
                    <p data-i18n="contact.subtitle">有任何问题或合作意向，欢迎随时联系我！</p>
                    <form class="contact-form" id="contactForm">
                        <div class="form-group">
                            <label for="name" data-i18n="contact.name">姓名</label>
                            <input type="text" id="name" name="name" required data-i18n="contact.name" placeholder="姓名">
                        </div>
                        <div class="form-group">
                            <label for="email" data-i18n="contact.email">邮箱</label>
                            <input type="email" id="email" name="email" required data-i18n="contact.email" placeholder="邮箱">
                        </div>
                        <div class="form-group">
                            <label for="subject" data-i18n="contact.subject">主题</label>
                            <input type="text" id="subject" name="subject" required data-i18n="contact.subject" placeholder="主题">
                        </div>
                        <div class="form-group">
                            <label for="message" data-i18n="contact.message">留言</label>
                            <textarea id="message" name="message" rows="5" required data-i18n="contact.message" placeholder="留言"></textarea>
                        </div>
                        <button type="submit" class="submit-button" data-i18n="contact.send">发送消息</button>
                        <div class="form-message" id="formMessage"></div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <p data-i18n="footer.copyright">© 2024 我的作品集. 保留所有权利.</p>
                <div class="social-links">
                    <a href="https://kirineko.github.io" target="_blank" class="social-link" title="个人网站">
                        <i class="fas fa-globe"></i>
                    </a>
                    <a href="mailto:1018465438@qq.com" class="social-link" title="邮箱联系">
                        <i class="fas fa-envelope"></i>
                    </a>
                </div>
                <p data-i18n="footer.design">用心设计与开发</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>